<template>
	<view class="product-card" @click="toDetail">
		<view class="product-tag" :class="tagType">
			{{ tagText }}
		</view>
		<image mode="aspectFill" :src="imageUrl" class="product-image" />
		<view class="product-info">
			<view class="product-title">{{ title }}</view>
			<view class="product-price">
				¥{{ price }} <text class="original">¥{{ originalPrice }}</text>
			</view>
			<view v-if="tagType === 'group'" class="group-info">
				{{ groupPeople }}人团 · 已有{{ groupCount }}人成团
			</view>
			<view v-else-if="tagType === 'bargain'" class="bargain-info">
				已有{{ bargainCount }}人参与砍价
			</view>
			<view v-else-if="tagType === 'rush'" class="rush-info">
				剩余{{ rushStock }}件 · {{ rushCount }}人已抢
			</view>
		</view>
	</view>
</template>

<script setup>
	name: "product-card"
	const props = defineProps({
		tagType: {
			type: String,
			default: 'seckill' // seckill/group/bargain/discount/rush
		},
		imageUrl: String,
		title: String,
		price: [String, Number],
		originalPrice: [String, Number],
		groupPeople: Number,
		groupCount: Number,
		bargainCount: Number,
		rushStock: Number,
		rushCount: Number
	})

	const tagTexts = {
		seckill: '秒杀',
		group: '拼团',
		bargain: '砍价',
		discount: '优惠价',
		rush: '抢购'
	}

	const tagText = tagTexts[props.tagType] || '活动'

	const toDetail = () => {
		uni.navigateTo({
			url: '/pages/product/product_detail'
		})
	}
</script>

<style scoped>
	.product-card {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	}

	.product-tag {
		position: absolute;
		top: 8px;
		left: 8px;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		z-index: 1;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		font-weight: bold;
	}

	.product-tag.seckill {
		background: linear-gradient(135deg, #f57c00, #ff9800);
	}

	.product-tag.group {
		background: linear-gradient(135deg, #9575cd, #7e57c2);
	}

	.product-tag.bargain {
		background: linear-gradient(135deg, #4db6ac, #26a69a);
	}

	.product-tag.discount {
		background: linear-gradient(135deg, #ff9800, #f57c00);
	}

	.product-tag.rush {
		background: linear-gradient(135deg, #ff4081, #e91e63);
	}

	.product-image {
		width: 100%;
		height: 160px;
	}

	.product-info {
		padding: 8px;
	}

	.product-title {
		font-size: 14px;
		margin-bottom: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product-price {
		color: #e4393c;
		font-size: 16px;
		font-weight: bold;
	}

	.original {
		color: #999;
		font-size: 12px;
		text-decoration: line-through;
		margin-left: 4px;
	}

	.group-info,
	.bargain-info {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}

	.group-info:before {
		content: '👥';
		margin-right: 5px;
	}

	.bargain-info:before {
		content: '✂️';
		margin-right: 5px;
	}

	.rush-info {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}

	.rush-info:before {
		content: '🔥';
		margin-right: 5px;
	}
</style>